import React, { useEffect, useState } from 'react'
import $http from '../../api/http'
import {useNavigate} from 'react-router-dom'
export default function ProductList() {
  const [list, setList] = useState([])
  const nav=useNavigate()
  const getProductList = async () => {
    const { data: { data } } = await $http.products.findGoods()
    console.log(data);
    setList(data)
  }
  useEffect(() => {
    getProductList()
  }, [])
  const goDetail=(id)=>{
    nav(`/home/product/detail?id=${id}`)
  }
  const goUpdate=(id)=>{
    nav(`/home/product/update/${id}`)
  }
  return (
    <div>
      <h1>商品列表</h1>
      <table style={{width:'100%',padding:'10px'}}>
        <thead>
          <tr>
            <td>商品名称</td>
            <td>商品标题</td>
            <td>商品价格</td>
            <td>商品分类</td>
            <td>商品图片</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          {
            list.map(item => <tr key={item._id}>
              <td>{item.name}</td>
              <td>{item.title}</td>
              <td>{item.price}</td>
              <td>{item.type.name}</td>
              <td><img src={item.imgSrc} style={{width:'50px',borderRadius:'50%'}}/></td>
              <td>
                <button onClick={()=>goDetail(item._id)}>详情</button>
                <button onClick={()=>goUpdate(item._id)}>修改</button>
              </td>
            </tr>)
          }
        </tbody>
      </table>
    </div>
  )
}
